<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>旅游网站</title>
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
	</head>
	<body>
		<section class="qui-page">
			<header class="qui-header">
				<h1>国内旅游计划</h1>
			</header>
			<section class="container">
				<div class="plcRouteList">
				  <a href="#"> 
					<img src="img/fengjing.jpg" width="100%" alt="" class="pic" />
			        <div class="bottom ">
			          <p class="face"><img src="img/touxiang.jpg" width="38" height="38" alt="" /></p>
			          <h2 class="title">我的旅游行程</h2>
			        </div>
			        <p class="day">14天</p>
				  </a>
		          <div class="infos">
		            <div>
		              <em>城市</em>  <!--<em>标签表示其中的文本为强调的内容，这段文字显示为斜体。当然我们可以在样式表里清除其字体样式，重新设置其他字体样式-->
		              <p> 昆明 - 香格里拉 - 西藏 </p>
		            </div>
		          </div>
				</div>
			</section>
			<section class="container">
				<div class="plcRouteList">
				  <a href="#">
				  	<img src="img/华东.jpg" width="100%" alt="" class="pic" />
				    <div class="bottom ">
				      <p class="face"><img src="img/touxiang.jpg" width="38" height="38" alt="" /></p>
				      <h2 class="title">我的旅游行程</h2>
				    </div>
				    <p class="day">15天</p>
				  </a>
			      <div class="infos">
			        <div>
			          <em>城市</em>  <!--<em>标签表示其中的文本为强调的内容，这段文字显示为斜体。当然我们可以在样式表里清除其字体样式，重新设置其他字体样式-->
			          <p> 北京 - 常州 - 苏州 </p>
			      	</div>
       			  </div>
				</div>
			</section>
			<footer class="qui-footerBasic">
				<p class="switchStyle"><span >手机版</span><a  href="#"><span>电脑版</span> </a><span><a href="#">APP</a></span></p>
			</footer>
		</section>
		<aside class="qui-asides">   <!--语义化元素<aside></aside>表示article元素内容之外的、与article元素内容相关的辅助信息。-->
		   	<section class="qui-aside">
		    	<nav class="qui-asideNav">  <!--语义化元素<nav></nav>表示页面中导航链接的部分-->
		     		<ul>
				      <li><a href="#" ><span>首页</span></a></li>
				      <li><a href="#" ><span>目的地</span></a></li>
				      <li><a href="#" ><span>酒店</span></a></li>
				      <li><a href="#" ><span>机票</span></a></li>
				      <li><a href="#" ><span>时间</span></a></li>
				      <li><a href="#" ><span>点评</span></a></li>
		    		</ul>
		    	</nav>
		    </section>
		</aside>
	</body>
</html>
